<template>
  <div class="list acea-row">
    <div
      v-for="item in couponList"
      :key="item.id"
      class="item acea-row"
      :class="Number(item.status) > 0 || item.isUse ? 'disabled' : ''"
      :style="
        $nuxt.$route.path == '/users/coupon_list'
          ? 'margin-right: 18px'
          : 'margin-right: 40px'
      "
    >
      <div class="coupon_left">
        <div class="money">
          <statistic
            :value="item.money"
            :precision="0"
            :currency="item.currency"
          />
        </div>
        <div class="info">
          {{ $t("minPrice", [item.minPrice]) }}
        </div>
      </div>
      <div class="coupon_rigth">
        <div v-if="item.day" class="text_rigth">
          {{
            $t(`page.users.userCoupon.receivedInfo`) +
            item.day +
            $t(`page.users.userCoupon.receivedInfo1`)
          }}
        </div>
        <div v-else class="text_rigth">
          {{ item.name }}
        </div>
        <div v-if="!item.startTime">
          <div class="receive" v-if="item.isUse">
            {{ $t(`page.users.userCoupon.received`) }}
          </div>
          <div class="receive" v-else @click="receiveCoupon(item)">
            {{ $t(`page.users.userCoupon.receive`) }}
          </div>
        </div>
        <div>
          <div class="label">
            {{
              item.useType === 1
                ? $t(`page.users.userCoupon.navList[0].name`)
                : $t(`page.users.userCoupon.navList[1].name`)
            }}
          </div>
        </div>
        <div v-if="item.startTime" class="time">
          {{ item.startTime | dateFormat }}~{{ item.endTime | dateFormat }}
        </div>
        <div v-else class="time">
          <div v-if="item.useStartTimeStr">
            {{ item.useStartTimeStr | dateFormat }}~{{
              item.useEndTimeStr | dateFormat
            }}
          </div>
          <div v-else></div>
        </div>
      </div>
      <!-- <div class="text">
        <div class="label">
          {{
            item.useType === 1
              ? $t(`page.users.userCoupon.navList[0].name`)
              : $t(`page.users.userCoupon.navList[1].name`)
          }}
        </div>
        <div class="text-cont acea-row row-middle">
          <div class="money">
            <statistic
              :valueStyle="{ color: '#bfbfbf', fontSize: '36px' }"
              :value="item.money"
              :currency="item.currency"
            />
          </div>
          <div class="info">
            <div>{{ $t("minPrice", [item.minPrice]) }}</div>
          </div>
        </div>
        <div v-if="item.day" class="content line2">
          {{
            $t(`page.users.userCoupon.receivedInfo`) +
            item.day +
            $t(`page.users.userCoupon.receivedInfo1`)
          }}
        </div>
        <div v-else class="content line2">
          {{ item.name }}
        </div>
        <div v-if="item.startTime" class="time">
          {{ item.startTime | dateFormat }}~{{ item.endTime | dateFormat }}
        </div>
        <div v-else class="time">
          <div v-if="item.useStartTimeStr">
            {{ item.useStartTimeStr | dateFormat }}~{{
              item.useEndTimeStr | dateFormat
            }}
          </div>
          <div v-else></div>
          <div>
            <div class="receive" v-if="item.isUse">
              {{ $t(`page.users.userCoupon.received`) }}
            </div>
            <div class="receive" v-else @click="receiveCoupon(item)">
              {{ $t(`page.users.userCoupon.receive`) }}
            </div>
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>
<script>
export default {
  name: "coupon",
  props: {
    couponList: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  methods: {
    receiveCoupon(item) {
      if (!this.$auth.loggedIn) {
        this.$store.commit("isLogin", true);
      } else {
        this.$axios
          .post("/api/front/coupon/receive", {
            couponId: item.id,
          })
          .then((res) => {
            item.isUse = 1;
            this.$message.success(res.message);
          });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/variables.scss";
.list {
  .item {
    width: 351px;
    height: 120px;
    box-sizing: border-box;
    padding: 14px;
    margin: 0 40px 40px 0;
    background: url("~assets/images/coupon-bg-new.png") center/cover no-repeat;
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.06);
    &:nth-child(3n) {
      margin-right: 0;
    }
    &.disabled {
      background-image: url("~assets/images/coupon-dis-bg-new.png");

      // .label {
      //   background-color: rgba(145, 145, 145, 0.1);
      // }
      opacity: 0.5;
      // .money {
      //   ::v-deep .con {
      //     color: $use-color-info-light-4 !important;

      //   }
      // }
      // .coupon_left,.coupon_rigth {
      //   color: $use-color-info-light-4 !important;

      // }
      // .receive {
      //   color: $use-color-info-light-4 !important;
      //   border-color: $use-color-info-light-4 !important;
      // }
    }
    .coupon_left {
      width: 80px;
      box-sizing: border-box;
      padding-right: 5px;
      padding-top: 20px;
      font-size: 12px;
      font-weight: 500;
      color: $use-color-info;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      .money {
        ::v-deep .con {
          align-items: flex-end;
          .prefix {
            font-size: 18px;
          }
          .number {
            font-size: 24px !important;
          }
        }
      }
      .info {
        flex: 1;
        min-width: 0;
        width: 75px;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
    .coupon_rigth {
      flex: 1;
      margin-left: 16px;
      color: $use-color-info;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .text_rigth {
        font-size: 14px;
        font-weight: 500;
      }
      .receive {
        display: inline-block;
        padding: 2px 4px;
        border-radius: 2px;
        font-size: 10px;
        line-height: 16px;
        font-weight: 500;
        color: $user--color-primary;
        border: 0.5px solid $user--color-primary;
      }
      .label {
        display: inline-block;
      }
      .time {
        font-size: 10px;
        color: $use-color-info-light-3;
      }
    }
  }
}
</style>
